<html>

<head>
    <title>基于vue+elementui</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="../../components/element-ui/2.12.0/theme-chalk/index.css">
    <style>
        .el-table th {
            text-align: center;
        }

        .el-table tbody tr td:first-child {
            text-align: center;
        }
    </style>
</head>
<body>

<div id="app">
    <template>
        <div>
            <el-table ref="multipleTable" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180" sortable>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"  show-overflow-tooltip>
                </el-table-column>
            </el-table>

            <el-pagination background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[10, 50, 100, 200]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
    </template>
</div>

<!--引入vue -->
<script src="../../components/vue/2.6.10/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../components/element-ui/2.12.0/index.js"></script>
<!-- 引入组件库 -->
<script src="../../components/axios/0.19.0/axios.js"></script>
<script src="../../components/qs/6.8.0/qs.js"></script>
<!-- 引入封装的axios -->
<script src="../../components/axiosUtil.js"></script>
<script type="text/javascript">

    const app=new Vue({
        el: "#app",
        data: {
            keyword: "集团",
            total: 5,
            currentPage: 1,
            pageSize: 10,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: []
        },
        created: function(){
            // 组件创建完后获取数据，
            // 此时 data 已经被 observed 了
            this.fetchData();
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(function(row)  {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            callbackFunction(result) {
                alert(result + "aaa");
            },
            fetchData(){ //获取数据
                //promise 要用then接收或者await async
                doGet("/user/page",  {
                    keywords:this.keyword//输入的关键词
                }).then(pageData => {
                    console.info(pageData);
                    this.total = pageData.count;
                    this.currentPage = pageData.currentPage;
                    this.tableData = pageData.data;
                });
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.currentPage = 1;
                this.fetchData(1, val);
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val){
                this.currentPage = val;
                this.fetchData(val, this.pageSize);
                // console.log(`当前页: ${val}`);
            }

        }
    });


</script>

</body>

</html>
